<template>
	<view class="goods-detail" :style="{'height':minH}">
		<view :style="{'height':(winH-btnBoxH)+'px','overflow-y': 'auto'}">
			<view class="goods-box">
				<!-- 轮播图 start -->
				<view class="goods-swpper">
					<bw-swiper :swiperList="goodSwiperList" style="width:100%"></bw-swiper>
				</view>
				<!-- 轮播图 end -->
				<view class="goods-header">
					<view class="text-line goods-unique">
						<text>{{detail.promote_date_str}}</text>
					</view>
					<view class="text-line goods-brand">
						<text>{{detail.goods_name}}</text>
					</view>
					<!-- <view class="text-line goods-name">
						<text>{{detail.goods_name}}</text>
					</view> -->
					<view class="text-line goods-price">
						<text>售价：{{detail.goods_sale_price}}</text><text class="goods-price-desc">优惠价：{{detail.youhui_format}}</text>
					</view>
					<view class="text-line goods-tool">
						<view class="share">
							<image src="../../static/images/icon/icon-share.svg" mode=""></image>
							<text>立即分享</text>
						</view>
						<view class="split">
							<text>|</text>
						</view>
						<view class="order-bar">
							<image src="../../static/images/icon/icon-star-shine.svg" mode=""></image>
							<text>好物甄选</text>
						</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view class="goods-content">
					<view class="content-title">
						<text>商品详情</text>
					</view>
					<view class="goods-content-box">
						<rich-text :nodes="detail.content || ''"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="info-btn">
			<view class="pay-btn">
				<view class="pay-price" @click="invokeBag">
					<view class="total-price">
						<min-badge count="10" maxCount="9">
							<image src="../../static/images/icon/icon-bag-active.svg" mode=""></image>
						</min-badge>
					</view>
					<view class="total-price-notice">
						<text>购物袋</text>
					</view>
				</view>
				<view class="btn">
					<button type="default" class="wss-btn" @click="handleBag">加入购物袋</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {globalMixin} from '@/util/globalMixin.js'
	import {getGoodsContent,getGoodsDetail} from '@/api/goods.js'
	import minBadge from '@/components/min-badge/min-badge'
	export default {
		mixins:[globalMixin],
		components: {
			minBadge
		},
		data() {
			return {
				winH: 0,
				btnBoxH: 0,
				goodSwiperList: [
				],
				detail: {
					promote_date_str: '',
					goods_name: '',
					goods_sale_price: '',
					youhui_format: '',
					content: ''
				}
			}
		},
		onLoad(options) {
			this.detail.id = options.id 
			this.getGoodsDetail()
		},
		mounted() {
			this.initH()
		},
		computed: {
			minH: function(){
				return this.winH+"px"
			}
		},
		methods: {
			getGoodsDetail() {
				let result = getGoodsDetail({supid:this.getSupId(),uid:this.detail.id,u:0});
				result.then(res=> {
					console.log(res)
					if(res.code == 0) {
						let data = res.data || {}
						this.detail = Object.assign(this.detail, data.product)
						if(data.arr_gallery) {
							data.arr_gallery.forEach(item =>{
								item.forEach(x =>{
									this.goodSwiperList.push({img:x})
								})
							})
						} 
					}
				})
				// 获取商品详情
				getGoodsContent({supid:this.getSupId(),uid:this.detail.id}).then(res =>{
					if(res.code == 0){
						console.log(res)
						this.detail.content = res.data.data
					}
				})
			},
			handleBag() {
				// 假如购物袋
			},
			invokeBag() {
				console.log("asdf")
				uni.switchTab({
					url:'/pages/cart/cart'
				})
			},
			initH () {
				let _self = this
				uni.getSystemInfo({
				    success: function (res) {
						_self.winH = res.windowHeight
				    }
				});
				let autoScroll1 = uni.createSelectorQuery().select('.info-btn')
				autoScroll1.boundingClientRect(z => {
					if(z && z.height) {
						_self.btnBoxH = z.height
						console.log(z.height)
					}
				}).exec()
			}
		}
	}
</script>

<style scoped lang="scss">
.goods-detail {
	background-color: #FFFFFF;
	.goods-box {
		padding: 0 40rpx 40rpx 40rpx;
		overflow-y: auto;
	}
	.goods-header {
		margin-top: 20rpx;
		text-align: center;
		.text-line {
			margin-top: 20rpx;
		}
		.goods-unique {
			color: #949494;
		}
		.goods-brand {
			font-weight: 550;
			font-size: 32rpx;
		}
		.goods-price-desc {
			margin-left: 20rpx;
		}
		.goods-tool {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			.split {
				color: #949494;
			}
			.share {
				display: flex;
				align-items: center;
				margin-right: 40rpx;
			}
			.order-bar {
				display: flex;
				align-items: center;
				margin-left: 40rpx;
			}
			image {
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	
	.goods-content {
		.content-title {
			line-height: 120rpx;
			height: 120rpx;
			font-size: 32rpx;
			font-weight: 550;
		}
	}
	
	.info-btn {
		position: relative;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		.pay-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx;
			.pay-price {
				width: 100%;
				text-align: right;
				padding-right: 60rpx;
				.total-price {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
				.total-price-notice {
					font-size: 20rpx;
				}
			}
			button {
				background-color: black;
				color: #FFFFFF;
				border-radius: 0;
			}
		}
	}
}
</style>
